<template>
  <a-tag :color="statusColor">{{ statusValue }}</a-tag>
</template>
<script lang="ts" setup>
import { MenuStatus } from "@common/dict/Settings";
import { ref, watch } from "vue";
import _isEmpty from "lodash/isEmpty";
import { DictItem } from "@/common/dict";

export interface Props {
  status: number;
  type: string;
}

const props = withDefaults(defineProps<Props>(), {
  status: 0,
  type: "",
});

const __STATUS_MAP__: Record<string, DictItem[]> = {
  menuStatus: MenuStatus,
};

const statusValue = ref<string>("/");
const statusColor = ref<string>("#ddd");

const getStatus = (type: string, status: number) => {
  let text: any = "";
  let color: any = "";
  if (type && !_isEmpty(__STATUS_MAP__[type])) {
    const targetStatus = __STATUS_MAP__[type].find(
      (item) => item.value === status
    );
    if (targetStatus) {
      text = targetStatus.name;
      color = targetStatus?.color;
    }
  }
  return [text, color];
};

watch(
  () => [props.status, props.type],
  ([newStatus, newType]) => {
    if (newStatus >= 0 && newType) {
      const [text, color] = getStatus(newType as string, newStatus as number);
      statusValue.value = text;
      statusColor.value = color;
    }
  },
  {
    immediate: true,
  }
);
</script>
<style scoped lang="scss"></style>
